<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from '@store/counterStore'
import Language from './Language.vue'
import langMap from '@/locales/LangMap'
import { loginApi } from '@api/auth'
import electronUtils from '@/utils/electronUtils'

defineProps<{ msg: string }>()

const counterStore = useCounterStore()

const router = useRouter()
function goBack() {
  router.back()
}
const count = ref(0)

function login() {
  loginApi({ username: 'sysadmin', password: 'sysadmin' }).then((res) => {
    console.log(res)
  })
}

console.log('dev独有的环境变量：' + import.meta.env.VITE_DEV_PARAM)
// #region 进度条的显示隐藏
const showProcess = ref(false)
/**切换process 显示/隐藏 */
function switchProcess() {
  showProcess.value = !showProcess.value
  electronUtils.showProcess(showProcess.value)
}
// #endregion
</script>

<template>
  <ul>
    <li>
      <el-button type="warning" @click="switchProcess">{{
        showProcess ? '关闭process' : '显示process'
      }}</el-button>
    </li>
  </ul>
  <SvgIcon name="renwen" :size="60" style="color: pink"></SvgIcon>
  <li>
    <el-button type="primary" @click="login">登录请求</el-button>
  </li>
  <h1>{{ $t(langMap.app_title) }}</h1>
  <h1>{{ $t('app.title') }}</h1>
  <h1>当前的计数为：{{ counterStore.counter }} 双倍值为：{{ counterStore.doubleCounter }}</h1>
  <li>
    <el-button type="warning" @click="counterStore.counter++">直接操作state去改变值</el-button>
  </li>
  <li>
    <el-button type="info" @click="counterStore.increment">increment</el-button>
  </li>
  <li>
    <Language />
  </li>
  <h1>{{ msg }}</h1>
  <el-icon size="25" color="red">
    <i-ep-edit />
  </el-icon>

  <el-button type="success" @click="goBack">返回上一页</el-button>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the
    official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
